<template>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="menuRevamp.isShow">
      <div class="modal-ctrl-main odd-row-ctrl">
        <div class="modal-title">
          <p>修改权限因子</p>
        </div>
        <div class="modal-ctrl-content">

       <!--   <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              菜单名称：
            </div>
            <input type="text" readonly="readonly" v-model="menuDisplayName" @click="getMuneAjax" class="modal-text f-l">
            <input type="hidden" v-model="params.menuId">
            <div class="tree-menu-body" v-show="menuTreeIsShow">
              <div id="tree-menu" class="ztree"></div>
            </div>
          </div>-->

          <div class="modal-row">
            <div class="modal-form-key indispensable f-l">
              权限因子名称：
            </div>
            <input type="text" maxlength="50" placeholder="最大50个字符" v-model="params.name" class="modal-text f-l">
          </div>

          <div class="modal-row">
            <div class="modal-form-key f-l">
              备注：
            </div>
            <textarea maxlength="250" placeholder="最大250个字符" v-model="params.remark" class="modal-text f-l"></textarea>
          </div>

        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="close">取消</button>
          <button type="button" class="btn btn-info" @click="subBtn">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
    export default {
        name: "MenuRevampModal",
        props:["menuRevamp","jurisdictionId"],
        data(){
          return{
            setting : {
              data: {
                simpleData: {
                  enable: true
                },
              }
            },
            params:{
              menuId:null,
              name:null,
              remark:""
            },
            menuTreeIsShow:false,
            menuDisplayName:"",
            selectJurisdictionId:null
          }
        },
        watch:{
          menuRevamp:{
            handler(v1){
              //console.log(v1);
              if( v1.isShow ){
                this.selectJurisdictionId = this.jurisdictionId;
                //console.log(this.jurisdictionId);

                this.$axios.get(this.HOST+"/priActions/"+this.selectJurisdictionId)
                  .then((data)=>{
                    this.params.menuId = data.data.data.privilegeFunction.id;
                    this.params.name = data.data.data.name;
                    this.params.remark = data.data.data.remark;
                    this.menuDisplayName = data.data.data.privilegeFunction.name;
                    //console.log(data);
                  })
                  .catch((err)=>{
                    //console.log(err);
                  })
              }
            },
            deep:true
          }
        },
        mounted(){
          let _this = this;
          this.setting.callback = {
            onClick:function(event,treeId,treeNode){
              //console.log(treeNode);
              _this.menuTreeIsShow = false;
              _this.menuDisplayName = treeNode.name;
              _this.params.menuId = treeNode.id;
            }
          }
        },
        methods:{
          //渲染菜单树结构
          getMuneAjax(){
            this.menuTreeIsShow = true;
            this.$axios.get(this.HOST+"/priFuncs/scheme/page",{
              params:{
                pageNum:1,
                pageSize:-1
              }
            })
              .then((data)=>{
                //console.log(data);
                $.fn.zTree.init($("#tree-menu"), this.setting, data.data.data);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //提交
          subBtn(){
            //console.log(this.params);
            if( this.params.menuId === null || this.params.menuId === "" ){
              this.s_alert("请选择菜单!");
              // alert("请选择菜单!");
              return false;
            } else if (this.params.name === null || this.params.name === "") {
              this.s_alert("请填写权限因子名称!");
              return false;
            } else if (this.params.name.length > 50) {
              this.s_alert("权限因子名称超过50个字符，请重新输入!");
              return false;
            }
            this.$axios["put"](this.HOST+"/priActions/updatePriAction/"+ this.selectJurisdictionId,this.params)
              .then((data)=>{
                //console.log(data);
                if( data.data ){
                  this.s_alert("修改成功！");
                  // alert("修改成功！");
                  this.s_logwrite("基础信息管理-权限因子管理","修改");
                  this.close();
                  this.flushFn();
                }
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //通知刷新
          flushFn(){
            this.$emit("flushCallBank");
          },
          //关闭弹窗
          close(){
            this.params = {
              menuId:null,
                name:null,
                remark:""
            };
            this.$emit("menuRevampClose");
          }
        }
    }
</script>

<style scoped>
  textarea.modal-text {
    min-height: 60px;
    max-height: 60px;
    max-width: 80%;
    min-width: 80%;
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
  .modal-row{
    position: relative;
  }
</style>
